<template>
		<div class="le-main">
			<div @click="handleClick"><slot></slot></div>
			<el-dialog
				title="自定义链接"
				v-model="dialogVisible"
				:before-close="handleClose"
				center
				width="530px"
				:destroy-on-close="true"
				:append-to-body="true"
			>
				<el-form label-width="110px" ref="form">
					<el-form-item label="跳转链接" prop="url">
						<el-input placeholder="请输入跳转链接" v-model="form.url" />
						<div class="le-prompt-text">
							请填写完整的带有“https://”或“http://”的链接地址
							<br />
							或者小程链接“/pages/index/index”的链接地址
							<br />
							或者领券链接pages/index/index?originAppId=?&newUserTemplate=?
						</div>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="handleClose">取 消</el-button>
					<el-button type="primary" @click="handleConfirm"> 确 定 </el-button>
				</template>
			</el-dialog>
		</div>
</template>
<script>
export default {
	name: "web-link",
	data() {
		return {
			dialogVisible: false,
			form: {
				url: ""
			},
		};
	},
	props: {
		modelValue: {
			type: Object
		}
	},
	watch: {
		modelValue(newValue, oldValue) {
			console.log("link--->", newValue);
			this.form = newValue;
		}
	},
	mounted() {
		this.form.url = this.modelValue.url;
	},
	methods: {
		handleClose() {
			this.dialogVisible = false;
		},
		handleConfirm() {
			this.$emit("update:modelValue", this.form);
					this.dialogVisible = false;
		},
		handleClick() {
			this.dialogVisible = true;
		}
	}
};
</script>

<style scoped lang="scss">
.el-form {
	padding-right: 40px;
}
</style>
